<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Dynamic Content Writer</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="A real-time HTML editor">
<script type="text/javascript">
var editorSource =
'<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\">' +
'<html>' +
'<head>' +
'<title>Editor document<\/title>' +
'<style type="text/css">' +
'* {width:100%; height:100%; margin:0; border:0; background:#EFEFEF; font:10pt monospace; color:#006000;}' +
'html, body, form {padding:0;}' +
'textarea {overflow:auto; resize:none; box-sizing:border-box; -moz-box-sizing:border-box; padding:0.5em;}' +
'<\/style>' +
'<script type="text/javascript">' +
'var t;' +
'function updateViewer() {' +
'var v = window.parent.viewer.document;' +
'v.open();' +
'v.write(t.value);' +
'v.close();' +
'}' +
'function getFocus() {' +
'if (t.value == t.defaultValue) {' +
't.value = "";' +
'updateViewer();' +
'}' +
'}' +
'function loseFocus() {' +
'if (t.value == "") {' +
't.value = t.defaultValue;' +
'updateViewer();' +
'}' +
'}' +
'window.onload = function() {' +
't = document.f.ta;' +
'updateViewer();' +
'}' +
'<\/script>' +
'<\/head>' +
'<body>' +
'<form name="f" method="get" onsubmit="return false;" action="">' +
'<textarea rows="1" cols="1" oninput="updateViewer();" onpropertychange="updateViewer();" onfocus="getFocus();" onblur="loseFocus();" name="ta" spellcheck="false">&lt;p&gt;Embed code in the text field above and see the result in the frame below.&lt;/p&gt;<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
function updateEditor() {
var e = window.editor.document;
e.open();
e.write(editorSource);
e.close();
}
</script>
</head>
<frameset rows="50%,50%" onload="updateEditor();">
<frame name="editor" src="about:blank">
<frame name="viewer" src="about:blank">
</frameset>
</html>